<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
		</style>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			@import url("https://unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css");
		</style>
	</head>

	<body>
		<div id="app">
			<el-tree show-checkbox :check-on-click-node="true" :data="data3" node-key="id" :props="defaultProps"
			 default-expand-all @node-click="getNodeChildren" ref="tree">
			</el-tree>
			<el-table :data="childNode" style="width: 100%">
				<el-table-column prop="id" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="label" label="文本" width="180">
				</el-table-column>
				<el-table-column prop="label" label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" size="small" @click="editNode(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
				<el-input v-model="currentNode.id" placeholder="请输入内容"></el-input>
				<el-input v-model="currentNode.label" placeholder="请输入内容"></el-input>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		
		<script>
			new Vue({
				el: '#app',
				methods: {
					getNodeChildren(node) {
						let cnode = []
						this.childNode = this.$refs.tree.getCheckedNodes()
					},
					editNode(item) {
						this.currentNode = item

						this.dialogVisible = true
					},
					loopNode(node) {
						node.forEch(item => {
							this.childNode.push(item)
							if (item.children && item.children.length > 0) {
								this.loopNode(item.children)
							}
							return
						})
					}
				},
				data() {
					return {
						currentNode: {
							id: '',
							label: ''
						},
						dialogVisible: false,
						childNode: [],
						data3: [{
							id: 1,
							label: '一级 1',
							children: [{
								id: 4,
								label: '二级 1-1',
								children: [{
									id: 9,
									label: '三级 1-1-1'
								}, {
									id: 10,
									label: '三级 1-1-2'
								}]
							}]
						}, {
							id: 2,
							label: '一级 2',
							children: [{
								id: 5,
								label: '二级 2-1'
							}, {
								id: 6,
								label: '二级 2-2'
							}]
						}, {
							id: 3,
							label: '一级 3',
							children: [{
								id: 7,
								label: '二级 3-1'
							}, {
								id: 8,
								label: '二级 3-2'
							}]
						}],
						defaultProps: {
							children: 'children',
							label: 'label'
						}
					};
				}
			})
		</script>
	</body>
</html>